<template>
  <div style="background-color: #f4f4f4">
    <!-- 顶部搜索 -->
    <van-sticky>
  
    <van-row style="background-color: #fff;">
      <van-col span="5" class="top1">
        <router-link to="/home/city">{{ city }}</router-link></van-col
      >
      <router-link to="/home/search" tag="van-col" span="19" class="top2">
        <van-search placeholder="搜索" />
      </router-link>
    </van-row>
    </van-sticky>

    <div id="allmap"></div>
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in list" :key="item.id"
        ><img :src="item.image_url" alt=""
      /></van-swipe-item>
    </van-swipe>

    <!-- 分类 -->
    <van-grid :column-num="5">
      
      <router-link :to="`/category/${item.id}`" tag="van-grid-item"
        v-for="item in obj"
        :key="item.id"
        :icon="item.icon_url"
        :text="item.name"
      ></router-link>
    </van-grid>
    <div class="xian"></div>
    <!-- 品牌制造商直供 -->
    <router-link to="/home/brand" class="demo" tag="div" style="background-color: #fff">品牌制造商直供</router-link>


    <van-grid class="logo" :border="false"  :column-num="2" >
  <van-grid-item v-for="item in demo" :key="item.id">
    <van-image :src="item.new_pic_url" />
    <div class="zi"><p class="p1">{{item.name}}</p><p class="p2">{{item.floor_price}}元起</p></div>
  </van-grid-item>
  </van-grid>
<!-- 新品首发 -->
<div class="new"> 
<img src="../../assets/images/bgnew.png" alt="">
<p class="p3">新品首发</p>
<p class="p4">查看全部</p>
</div>


<div class="new-demo" style="background-color: #fff">
  <ul class="ul-1">
    <router-link :to="`/home/${item.id}`" tag="li" class="li-1" v-for="item in newlogo " :key="item.id">
    
      <div class="tu1"><img :src="item.list_pic_url" alt=""></div>
      <p class="p5">{{item.name}}</p>
      <p class="p6">{{item.goods_brief}}</p>
      <p class="p7">￥{{item.retail_price}}</p>
    </router-link>
  </ul>
</div>
<!-- 人气推荐 -->
<div class="new"> 
<img src="../../assets/images/bgtopic.png" alt="">
<p class="p8">人气推荐·好物精选</p>
<p class="p9">查看全部</p>
</div>


<div class="new-demo" style="background-color: #fff">
  <ul class="ul-1">
    <router-link :to="`/home/${item.id}`" tag="li" class="li-1" v-for="item in tuijian " :key="item.id">
      <div class="tu1"><img :src="item.list_pic_url" alt=""></div>
      <p class="p5">{{item.name}}</p>
      <p class="p6">{{item.goods_brief}}</p>
      <p class="p7">￥{{item.retail_price}}</p>
    </router-link>
  </ul>
</div>

    <div class="xian"></div>

<!-- 专题精选 -->


<div class="jx" style="background-color: #fff">
专题精选<span class="icon"></span>
</div>

<div class="jx-demo" style="background-color: #fff">
  <ul class="ul-2">
  <li class="li-2" v-for="item in jingxuan" :key="item.id">
    <img :src="item.scene_pic_url" alt="">
    <div class="jx-zi"><p class="jx-p1">{{item.title}}</p><p class="jx-p2">{{item.price_info}}元起</p></div>
    <p class="jx-p3">{{item.subtitle}}</p>

  </li>
</ul>
</div>

<!-- 居家好物 -->
<div class="jujia">
  居家好物
</div>



<div class="jujia-2">
  <router-link :to="`/home/${item.id}`" tag="div" class="jujia-demo" v-for="item in jujia" :key="item.id">
<img :src="item.list_pic_url" alt="">
<p class="p-1">{{item.name}}</p>
<p class="p-2">￥{{item.retail_price}}</p>
  </router-link>
<div class="jujia-3">
<p>居家好物</p>
<img src="../../assets/images/icon_go_more.png" alt="">
</div>

</div>

<!-- 餐厨好物 -->
<div class="jujia">
  餐厨好物
</div>

<div class="jujia-2">
   <router-link :to="`/home/${item.id}`" tag="div" class="jujia-demo" v-for="item in canchu" :key="item.id">
<img :src="item.list_pic_url" alt="">
<p class="p-1">{{item.name}}</p>
<p class="p-2">￥{{item.retail_price}}</p>
   </router-link>
<div class="jujia-3">
<p>餐厨好物</p>
<img src="../../assets/images/icon_go_more.png" alt="">
</div>

</div>




<!-- 饮食好物 -->
<div class="jujia">
  饮食好物
</div>

<div class="jujia-2">
   <router-link :to="`/home/${item.id}`" tag="div" class="jujia-demo" v-for="item in yinshi" :key="item.id">
<img :src="item.list_pic_url" alt="">
<p class="p-1">{{item.name}}</p>
<p class="p-2">￥{{item.retail_price}}</p>
   </router-link>
<div class="jujia-3">
<p>饮食好物</p>
<img src="../../assets/images/icon_go_more.png" alt="">
</div>

</div>


<!-- 配件好物 -->
<div class="jujia">
  配件好物
</div>

<div class="jujia-2">
   <router-link :to="`/home/${item.id}`" tag="div" class="jujia-demo" v-for="item in peijian" :key="item.id">
<img :src="item.list_pic_url" alt="">
<p class="p-1">{{item.name}}</p>
<p class="p-2">￥{{item.retail_price}}</p>
   </router-link>
<div class="jujia-3">
<p>配件好物</p>
<img src="../../assets/images/icon_go_more.png" alt="">
</div>

</div>


<!-- 服装好物 -->
<div class="jujia">
  服装好物
</div>

<div class="jujia-2">
   <router-link :to="`/home/${item.id}`" tag="div" class="jujia-demo" v-for="item in fuzhuang" :key="item.id">
<img :src="item.list_pic_url" alt="">
<p class="p-1">{{item.name}}</p>
<p class="p-2">￥{{item.retail_price}}</p>
   </router-link>
<div class="jujia-3">
<p>服装好物</p>
<img src="../../assets/images/icon_go_more.png" alt="">
</div>

</div>



<!-- 婴童好物 -->
<div class="jujia">
  婴童好物
</div>

<div class="jujia-2">
   <router-link :to="`/home/${item.id}`" tag="div" class="jujia-demo" v-for="item in yingtong" :key="item.id">
<img :src="item.list_pic_url" alt="">
<p class="p-1">{{item.name}}</p>
<p class="p-2">￥{{item.retail_price}}</p>
   </router-link>
<div class="jujia-3">
<p>婴童好物</p>
<img src="../../assets/images/icon_go_more.png" alt="">
</div>

</div>


<!-- 杂货好物 -->
<div class="jujia">
  杂货好物
</div>

<div class="jujia-2">
   <router-link :to="`/home/${item.id}`" tag="div" class="jujia-demo" v-for="item in zahuo" :key="item.id">
<img :src="item.list_pic_url" alt="">
<p class="p-1">{{item.name}}</p>
<p class="p-2">￥{{item.retail_price}}</p>
   </router-link>
<div class="jujia-3">
<p>杂货好物</p>
<img src="../../assets/images/icon_go_more.png" alt="">
</div>

</div>


<!-- 洗护好物 -->
<div class="jujia">
  洗护好物
</div>

<div class="jujia-2">
  <div class="jujia-demo" v-for="item in xihu" :key="item.id">
<img :src="item.list_pic_url" alt="">
<p class="p-1">{{item.name}}</p>
<p class="p-2">￥{{item.retail_price}}</p>
</div>
<div class="jujia-3">
<p>洗护好物</p>
<img src="../../assets/images/icon_go_more.png" alt="">
</div>

</div>



<!-- 兴趣好物 -->
<div class="jujia">
  兴趣好物
</div>

<div class="jujia-2">
  <div class="jujia-demo" v-for="item in xingqu" :key="item.id">
<img :src="item.list_pic_url" alt="">
<p class="p-1">{{item.name}}</p>
<p class="p-2">￥{{item.retail_price}}</p>
</div>
<div class="jujia-3">
<p>兴趣好物</p>
<img src="../../assets/images/icon_go_more.png" alt="">
</div>

</div>


<div style=" height: 50px;">

</div>
  </div>
</template>

    <script>
import { home } from "@/api/home/index.js";
export default {
  data() {
    return {
      city: "",
      list: [],
      obj: [],
      demo: [],
      newlogo:[],
      tuijian:[],
      jingxuan:[],
      jujia:[],
      canchu:[],
      yinshi:[],
      peijian:[],
      fuzhuang:[],
      yingtong:[],
      zahuo:[],
      xihu:[],
      xingqu:[],
    };
  },
  computed: {},
  created() {
    home().then((res) => {
      console.log(res);
      this.list = res.banner;
      this.obj = res.channel;
      this.demo = res.brandList;
      this.newlogo = res.newGoods;
      this.tuijian = res.hotGoods;
      this.jingxuan = res.topicList;
      this.jujia = res.newCategoryList[0].goodsList;
      this.canchu = res.newCategoryList[1].goodsList;
      this.yinshi = res.newCategoryList[2].goodsList;
      this.peijian = res.newCategoryList[3].goodsList;
      this.fuzhuang = res.newCategoryList[4].goodsList;
      this.yingtong = res.newCategoryList[5].goodsList;
      this.zahuo = res.newCategoryList[6].goodsList;
      this.xihu = res.newCategoryList[7].goodsList;
      this.xingqu = res.newCategoryList[8].goodsList;
    });
  },
  mounted() {
    // 百度地图API功能
    var _this = this;
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 12);

    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(
      function (r) {
        console.log(r);
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          _this.city = r.address.city;
          var mk = new BMap.Marker(r.point);
          map.addOverlay(mk);
          map.panTo(r.point);
          //   alert("您的位置：" + r.point.lng + "," + r.point.lat);
        } else {
          alert("failed" + this.getStatus());
        }
      },
      { enableHighAccuracy: true }
    );
  },
  methods: {},
};
</script>

    <style scoped lang="scss">
.top1 {
  text-align: center;
  line-height: 54px;
}
.top1 a {
  color: black;
  font-size: 14px;
}
.my-swipe {
  height: 200px;
  background-color: blanchedalmond;
  img {
    width: 100%;
  }
}
.xian {
  height: 8px;
  background-color: #f4f4f4;
}
.demo {
  height: 16px;
  padding: 20px 0;

  font-size: 12px;
}
.logo{
  position: relative;
 
}

.zi{
position: absolute;
text-align: left;
left: 15px;
top: 20px;

}
 .new{
   position: relative;
   height: 150px;
   background-color: #f4f4f4;
   img{
     width: 100%;
     margin-top: 10px;
   }
   .p3{
     position: absolute;
     font-size: 16px;
     margin: 16px 0;
     left: 155px;
     top: 30px;
     color: #8c9BAE;
   }
   .p4{
     position: absolute;
     font-size:12px;
     margin-top: 13px;
     background-color: #D8E4F0;
     color: #8c9BAE;
     padding: 5px 20px;
    left: 143px;
     top: 70px;

   }
 }
 .demo-new{
   background-color: #f4f4f4;
   height: 250px;
   
   img{
     width: 100%;
   }
 }
.ul-1{
  display: flex;
  height: 243px;
 overflow: hidden;
 overflow-x: auto;
 
}
.li-1{
   padding: 5px;
   width: 140px;
   height: 230px;
  margin-left: 10px;
  border-right:solid 2px #f9f9f9;
  
   p{
     text-align: left;
     overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
     width: 131px;
     margin-left: 10px;
    
   }
 }
 .tu1{
   width: 140px;
   height: 140px;
   img{
     width: 100%;
   }
 }

 .p5{
   margin: 4px 0 15px;
   color: #000;
   font-size: 15px;
   font-weight: bold;  
 }

 .p6{
   margin: 4px 0 12px ;
   color: #8a8a8a;
   font-size: 12px;

 }
 .p7{
   margin: 4px 0 12px;
   color: #9c3232;
 }



 .p8{
     position: absolute;
     font-size: 16px;
     margin: 16px 0;
     left: 125px;
     top: 30px;
     color: #8c9BAE;
   }
   .p9{
     position: absolute;
     font-size:12px;
     margin-top: 13px;
     background-color: #F4E9CB;
     color: #8c9BAE;
     padding: 5px 20px;
    left: 143px;
     top: 70px;

   }




   .jx{
     height: 18px;
     padding: 18px;
     color: #000;

   }

   .icon{
     display: inline-block;
     width: 16px;
     height: 16px;
     background:url(../../assets/images/right.png) no-repeat;
     margin-left: 3px;
     background-size: 100%;
     vertical-align:middle;
   }

.jx-demo{
height: 251px;
img{
  width: 288px;
  height: 163px;
  border-radius: 8px;
}
}
   .ul-2{
     width: 100%;
     display: flex;
     height: 251px;
     overflow: hidden;
     overflow-x: auto;

   }

   .li-2{
     margin-left: 12px;
     width: 288px;
     height: 250px;
   }


   .jx-zi{
     display: flex;
     justify-content: space-between;
   }

   .jx-p1{
     color: #000;
     margin: 4px 0 15px;
     font-size: 15px;
     font-weight: bold;
   }

    .jx-p2{
     color: #9c3232;
     margin: 4px 0 15px;
     font-size: 12px;
    
   }

      .jx-p3{
     color: #8A8A8A;
     margin: 4px 0 12px;
     font-size: 12px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

   }
 


 .jujia{
   color: #000;
   margin: 12px 0;
   font-size: 12px;
 }

.jujia-2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
 .jujia-demo{
   width: 180px;
   height: 215px;
   background-color: #fff;
   margin: 0 0 5px ;
   padding: 0 0 5px ;
 
   
   img{
     width: 151px;
     height: 151px;
     margin: 0 14px 0 14px;
   }

   .p-1{
     text-align: left;
     color: #000;
     font-size: 12px;
     margin: 12px 0  2.5px ;
     margin-left: 10px;
     overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
   }

   .p-2{
     text-align: left;
     color: #9c3232;
     font-size: 12px;
     margin: 12px 0  2.5px ;
     margin-left: 10px;
   }

 }


 .jujia-3{
   width: 180px;
   height: 215px;
   background-color: #fff;
   margin: 0 0 5px ;
   padding: 0 0 5px ;
   img{
     width: 35px;
     height: 35px;
     margin: 30px 0 0;
   }
   p{
     color: #333;
     font-size: 16px;
     margin: 30px 0 3px ;
   }
 }
</style>
